<template>
  <div class="road-condition">
    <!-- 搜索和刷新 -->
    <div class="search-refresh">
      <el-select
        v-model="searchText"
        placeholder="选择事件类型"
        @change="searchrRoadCondition"
      >
        <el-option label="碰撞" value="碰撞"></el-option>
        <el-option label="刮擦" value="刮擦"></el-option>
        <el-option label="碾压" value="碾压"></el-option>
        <el-option label="翻车" value="翻车"></el-option>
        <el-option label="失火" value="失火"></el-option>
        <el-option label="其他" value="其他"></el-option>
      </el-select>
      <el-icon class="refresh-icon" @click="refresh"><Refresh /></el-icon>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      max-height="200"
      style="width: 100%; font-size: 10px"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        width="60"
        prop="username"
        label="用户名"
      ></el-table-column>
      <el-table-column
        width="70"
        prop="type"
        label="事件类型"
      ></el-table-column>
      <el-table-column prop="address" label="事件地址"></el-table-column>
      <el-table-column prop="sign" label="附近建筑"></el-table-column>
      <el-table-column prop="time" label="发生时间"></el-table-column>
      <el-table-column prop="description" label="事件描述"></el-table-column>
      <el-table-column width="100" label="操作">
        <template #default="scope">
          <template v-if="scope.row.status === 0">
            <el-button
              style="background-color: #67c23a"
              type="text"
              @click="handlePass(scope.$index)"
              >通过</el-button
            >
            <el-button
              style="background-color: #f56c6c"
              type="text"
              @click="handleIgnore(scope.$index)"
              >忽略</el-button
            >
          </template>
          <span v-else-if="scope.row.status === 1" style="color: #67c23a"
            >已通过</span
          >
          <span v-else-if="scope.row.status === 2" style="color: #f56c6c"
            >已忽略</span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Refresh } from '@element-plus/icons-vue';
import { getAllTrafficReports, auditTrafficReport } from '../apis/index';
import { ElMessage } from 'element-plus';
const searchText = ref('');
const tableData = ref([]);
const refresh = () => {
  // TODO: 刷新数据
  getAllTrafficReports().then((res) => {
    tableData.value = res.data.result;
  });
};

const searchrRoadCondition = () => {
  // TODO: 搜索数据
  getAllTrafficReports().then((res) => {
    tableData.value = res.data.result.filter((item) => {
      return item.type === searchText.value;
    });
  });
};

//修改的方法
const handlePass = (index) => {
  const obj = { id: tableData.value[index].id, status: 1 };
  auditTrafficReport(obj).then((res) => {
    if (res.data.status === 1) {
      ElMessage.success('操作成功');
    } else {
      ElMessage.error('操作失败');
    }
  });
};

const handleIgnore = (index) => {
  const obj = { id: tableData.value[index].id, status: 2 };
  console.log(obj);
  auditTrafficReport(obj).then((res) => {
    if (res.data.status === 1) {
      ElMessage.success('操作成功');
    } else {
      ElMessage.error('操作失败');
    }
  });
};

onMounted(() => {
  refresh();
});
</script>

<style lang="scss" scoped>
.search-refresh {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
  /*将搜索框缩小 */
  .el-select {
    width: 150px;
    height: 24px;
    :deep(.el-select__wrapper) {
      min-height: 24px;
      line-height: 24px;
      padding: 0 5px;
      font-size: 12px;
      border: 1px solid #999;
      box-shadow: none;
    }
    .el-select__wrapper.is-focused {
      border: 1px solid #999;
      box-shadow: none;
    }
  }
  .el-icon {
    font-size: 12px;
    cursor: pointer;
  }
  .refresh-icon {
    transition: transform 1s;
    &:active {
      animation: rotate 1s linear;
    }
  }
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-720deg); // 负值实现逆时针旋转
    }
  }
}

.el-button {
  font-size: 10px;
  color: #fff;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  padding: 0 5px;
  transition: all 0.3s;
}
.el-button:hover {
  color: #fff;
  transform: translateY(-2px);
}
.el-select-dropdown__item {
  font-size: 12px;
  height: 30px;
}
</style>
